<template>
  <div class="left-card">
    <m-card title="地震时间段分布">
      <v-chart ref="vChart" :option="option" :autoresize="true" />
    </m-card>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "echarts";
import mCard from "@/components/mCard/index.vue";
import VChart from "vue-echarts";
// There should not be negative values in rawData
const rawData = [
  [10, 30, 30, 33, 30, 30, 130,30, 30, 130,30, 30],
  [32, 13, 10, 13, 9, 23, 21,30, 30, 130,30, 30],
  [22, 18, 19, 23, 20, 30, 30,30, 30, 130,30, 30],
  [15, 21, 20, 15, 10, 30, 40,30, 30, 130,30, 30],
  [82, 83, 90, 93, 190, 130, 120,30, 30, 130,30, 30],
];
const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}
const grid = {
  left:40,
  right: 30,
  top: 30,
  bottom: 30,
};
const series = ["3.0-3.9", "4.0-4.9", "5.0+"].map((name, sid) => {
  // 定义每个系列的颜色（可自定义）
  const colors = [
    "#409EFF", // 蓝色（对应3.0-3.9）
    "#E6A23C", // 橙色（对应4.0-4.9）
    "#F56C6C", // 红色（对应5.0+）
  ];

  return {
    name,
    type: "bar",
    stack: "total",
    barWidth: "60%",
    label: {
      show: false,
    },
    // 关键：设置系列颜色，图例颜色会自动同步
    itemStyle: {
      color: colors[sid], // 按索引取颜色（与系列一一对应）
    },
    data: rawData[sid], // 原始数据，如 [10, 30, 30, ...]
  };
});
// 图表配置（保持不变）
const option = ref({
  tooltip: {
    trigger: "axis", // 触发类型为坐标轴
    axisPointer: {
      // 坐标轴指示器样式
      type: "shadow", // 阴影指示器
    },
    backgroundColor: "rgba(0, 0, 0, 0.7)", // 背景颜色
    textStyle: {
      color: "#fff", // 文字颜色
      fontSize: 14, // 文字大小
    },
    formatter: (params) => {
      // 自定义提示框内容
      const param = params[0]; // 获取当前柱体数据
      return `
        <div style="color:${param.color}">●</div>
        ${param.name}: ${(param.value * 100).toFixed(1)}%
      `;
    },
  },

  legend: {
    selectedMode: false,
    textStyle: {
      color: "#ffffff", // 设置图例文字颜色为白色
      fontSize: 14, // 设置图例文字大小（可选）
    },
  },
  grid,
  yAxis: {
    type: "value",
    min: 0, // 从 0 开始
    max: 180, // 最大值 1（对应 100%）
    interval: 30, // 每 0.2 显示一个刻度
    axisLabel: {
      formatter: (value) => value, // 显示为百分比
      color: "#ffffff", // 结合之前的需求，设置字体颜色（白色）
    },
  },
  xAxis: {
    type: "category",
    data: ["8月", "9月", "10月", "11月", "12月", "1月", "2月","3月","4月","5月","6月","7月"
    ],
    axisLabel: {
      // Y 轴标签配置
      textStyle: {
        color: "#ffffff", // Y 轴字体颜色（白色）
        fontSize: 14, // Y 轴字体大小（可选）
      },
    },
  },
  series,
});
</script>
<style lang="scss">
  
.pie-chat-wrap {
  width: 100%;
  height: 100%;
  display: flex;
}
// 饼图
.pie-chat {
  pointer-events: all;
  position: relative;
  width: 236px;
  height: 100%;

  .pieCanvas {
    width: 100%;
    height: 100%;
    pointer-events: all;
  }
  .pieCanvas-content {
    width: 100%;
    height: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 12px;
    &-value {
      font-size: 2vw;
      font-weight: bold;
      text-shadow: 0 0 10px rgb(0 0 0);
    }
    &-name {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 1.4vw;
      text-align: center;
    }
  }
}
// 饼图3d legend
.pie-legend {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 0;
  &-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    box-sizing: border-box;

    .icon {
      width: 10px;
      height: 10px;
      border-radius: 10px;
      border: 2px solid #17e6c3;
      box-sizing: border-box;
      margin-right: 10px;
    }
    .name {
      font-weight: 300;
      font-size: 1.2vw;
      color: #ffffff;
    }
    .value {
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-end;
      justify-content: flex-end;
      width: 80px;
      text-align: right;

      font-weight: bold;
      color: #ffffff;
      font-family: D-DIN;
      font-weight: bold;
      font-size: 1.5vw;
      .unit {
        font-family: D-DIN;
        font-weight: 400;
        font-size: 1.2vw;
        color: #ffffff;
        opacity: 0.5;
        padding-left: 10px;
      }
    }
  }
}
</style>
